<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');

$this->load->view('header', array('title' => '选择图片'));
?>
<style>
.progressWrapper {
	width: 705px;
    margin-left:15px;
	overflow: hidden;
}

.progressContainer {
	margin: 5px;
	padding: 4px;
	border: solid 1px #E8E8E8;
	background-color: #F7F7F7;
	overflow: hidden;
}
/* Message */
.message {
	margin: 1em 0;
	padding: 10px 20px;
	border: solid 1px #FFDD99;
	background-color: #FFFFCC;
	overflow: hidden;
}
/* Error */
.red {
	border: solid 1px #B50000;
	background-color: #FFEBEB;
}

/* Current */
.green {
	border: solid 1px #DDF0DD;
	background-color: #EBFFEB;
}

/* Complete */
.blue {
	border: solid 1px #CEE2F2;
	background-color: #F0F5FF;
}

.progressName {
	font-size: 8pt;
	font-weight: 700;
	color: #555;
	width: 323px;
	height: 14px;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
}

.progressBarInProgress,
.progressBarComplete,
.progressBarError {
	font-size: 0;
	width: 0%;
	height: 2px;
	background-color: blue;
	margin-top: 2px;
}

.progressBarComplete {
	width: 100%;
	background-color: green;
	visibility: hidden;
}

.progressBarError {
	width: 100%;
	background-color: red;
	visibility: hidden;
}

.progressBarStatus {
	margin-top: 2px;
	width: 337px;
	font-size: 7pt;
	font-family: Arial;
	text-align: left;
	white-space: nowrap;
}

a.progressCancel {
	font-size: 0;
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../images/cancelbutton.gif);
	background-repeat: no-repeat;
	background-position: -14px 0px;
	float: right;
}

a.progressCancel:hover {
	background-position: 0px 0px;
}
</style>
<script type="text/javascript" src="/static/swfupload/swfupload.js"></script>
<script type="text/javascript" src="/static/swfupload/handlers.js"></script>
<script type="text/javascript">
var swfu;
window.onload = function () {
    swfu = new SWFUpload({
        // Backend Settings
        upload_url: "<?php echo $this->config->item('base_url') . '/' . $this->config->item('index_page');?>?c=album&m=upload&id=<?php echo $rows['album_id'];?>",
        post_params: {"auth": "<?php echo get_cookie('auth');?>", "rand": Math.random()},

        // File Upload Settings
        file_size_limit : "2 MB",	// 2MB
        file_types : "*.jpg;*.jpeg;*.gif;*.png;",
        file_types_description : "All Images",
        file_upload_limit : "0",

        // Event Handler Settings - these functions as defined in Handlers.js
        //  The handlers are not part of SWFUpload but are part of my website and control how
        //  my website reacts to the SWFUpload events.
        file_queue_error_handler : fileQueueError,
        file_dialog_complete_handler : fileDialogComplete,
        upload_progress_handler : uploadProgress,
        upload_error_handler : uploadError,
        upload_success_handler : uploadSuccess,
        upload_complete_handler : uploadComplete,

        // Button Settings
        button_image_url : "",
        button_placeholder_id : "spanButtonPlaceholder",
        button_width: 125,
        button_height: 25,
        button_text : '',
        button_text_style : '',
        button_text_top_padding: 0,
        button_text_left_padding: 0,
        button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
        button_cursor: SWFUpload.CURSOR.HAND,

        // Flash Settings
        flash_url : "/static/swfupload/swfupload.swf",

        custom_settings : {
            upload_target : "divFileProgressContainer"
        },

        // Debug Settings
        debug: false
    });
};
</script>
<div class="main">
	<div class="left">
		<div class="menu">
			<p><a href="?c=album&m=index">我的相册</a></p>
			<p class="current"><a href="?c=album&m=picture&id=<?php echo $rows['album_id'];?>">上传图片</a></p>
		</div>
		<div class="form">
			<div style="width:720px;border-bottom:#ccc 1px dotted;margin:0px 5px 5px 5px;text-align:center;padding:5px;"><?php echo $rows['album_name'];?></div>
            <form>
            <div style="background:url('/static/img/batch_upload.png') no-repeat;padding:2px;margin:10px 0 0 20px;height:25px;">
                <span id="spanButtonPlaceholder"></span>
            </div>
            <div style="margin:0 0 0 20px;font-size:12px;">鼠标选择图片时，同时按 Ctrl 或 Shift 键可以一次选中多张。每个相册最多上传<?php echo $this->config->item('album_max_picture');?>张图片，每张图片不能超过2M。</div>
            </form>
            <div id="divFileProgressContainer" style="display:none;"></div>
			<ul class="piclist">
            <?php
            $total = count($rows['album_picture']);
            foreach ($rows['album_picture'] as $key => $file_name)
            {
                $style = ($key % 4) ? '' : 'style="margin-left:20px"';
                $href  = $this->album->get_image_src('href', $rows['album_id'], $file_name);
                $thumb = $this->album->get_image_src('thumb', $rows['album_id'], $file_name);
                echo '<li ' . $style . '><p style="margin-top:2px;"><a href="' . $href . '" target="_blank"><img src="' . $thumb . '"  width="160" height="120"></a></p><p style="margin-top:5px;"><a href="javascript:void(0);" onclick="delete_picture(this, ' . $rows['album_id'] . ', \'' . $file_name . '\');return false;">删除</a></p></li>';
            }
            ?>
            </ul>
			<div class="clear"></div>
			<div style="width:720px;border-top:#ccc 1px dotted;margin:5px;padding:5px;"><input type="button" id="submit" value="保 存" style="display:<? echo $total ? 'block' : 'none';?>;padding:3px;width:100px;margin-top:20px;margin-left:300px;" onclick="generate(<?php echo $rows['album_id'];?>);return false;"></div>
		</div>
		<p style="height:10px">&nbsp;</p>
	</div>
    <?php
    $this->load->view('right');
    ?>
</div>
<script type="text/javascript">
function uploadSuccess(file, serverData)
{
    var response = $.parseJSON(serverData);

    try
    {
        var child  = $(".piclist").children();
        var length = child.length;
        
        $("#submit").show();
        $("#divFileProgressContainer").show();

        var progress = new FileProgress(file,  this.customSettings.upload_target);

        if (response.error_code)
        {
			progress.setStatus("Error.");
			progress.toggleCancel(false);

            alert(response.msg);
        }
        else
        {
            var style = (length % 4) ? '' : 'style="margin-left:20px"';
            $(".piclist").append('<li ' + style + '><p style="margin-top:2px;"><a href="' + response.data.src + '" target="_blank"><img src="' + response.data.thumb + '"  width="160" height="120"></a></p><p style="margin-top:5px;"><a href="javascript:void(0);" onclick="delete_picture(this, <?php echo $rows['album_id'];?>, \'' + response.data.file_name + '\');return false;">删除</a></p></li>');

			progress.setStatus("Thumbnail Created.");
			progress.toggleCancel(false);

        }
    }
    catch (ex)
    {
        this.debug(ex);
    }
}

function fileDialogComplete(numFilesSelected, numFilesQueued)
{
	try {
		if (numFilesQueued > 0) {
			this.startUpload();
            $("#divFileProgressContainer").show();
		}
	} catch (ex) {
		this.debug(ex);
	}
}

function uploadComplete(file)
{
	try {
		/*  I want the next upload to continue automatically so I'll call startUpload here */
		if (this.getStats().files_queued > 0) {
			this.startUpload();
		} else {
			var progress = new FileProgress(file,  this.customSettings.upload_target);
			progress.setComplete();
			progress.setStatus("所有图片上传完成~");
			progress.toggleCancel(false);

            setTimeout(function() {
                $("#divFileProgressContainer").hide();
            }, 5000);
		}
	} catch (ex) {
		this.debug(ex);
	}
}

function delete_picture(obj, id, name)
{
    $.get('?c=album&m=delete', {"id":id, "name":name}, function(response) {
        
        if (response.error_code)
        {
            alert(response.msg);
        }
        else
        {
            $(obj).parents('li').remove();
        }

    },"json");
}

function generate(id)
{
    var picture = '';
    $(".piclist li").each(function(key, obj) {
        if ( $(obj).hasClass("selected") )
        {
            picture += ',' + $(obj).attr("picture");
        }
    });

    $("#submit").attr('disabled', 'disabled').val('保存中...');

    $.get('?c=album&m=generate&rand=' + Math.random(), {"id":id}, function(response) {

        if (response.error_code)
        {
            alert(response.msg);
            $("#submit").attr('disabled', false).val('保 存');
        }
        else
        {
            location.href = '?c=album&m=index';
        }

    }, "json");
}
</script>
<?php
$this->load->view('footer');
?>